<script setup>
import {defineProps, ref, watch,defineEmits} from 'vue'
import {Discount} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {insertCourseClass, listCourseClass} from "../../../api/course/course.js";


const props = defineProps(["isInsertClass",'courseId'])
// 分班列表
const classTable = ref([])
// 课程班级对象
const courseClass=ref({
  className:''
})
// 是否新增班级显示
const isInsertClass = ref(false)
isInsertClass.value = props.isInsertClass;

const emit = defineEmits(['close','list'])
watch(() => props.isInsertClass, (newVal) => {
  isInsertClass.value = newVal;
});


// 新增分班
const handleInsertCourseClass=async ()=>{
  await insertCourseClass(props.courseId,courseClass.value).then(()=>{
    emit('close');
    emit('list')
    ElMessage.success("新增班级成功");
  })
}

// 取消按钮
const handleCancel = () => {
  emit('close');
  isInsertClass.value = false;
}
</script>

<template>
  <el-dialog
      v-model="isInsertClass"
      title="新建分班"
      width="500"
      align-center
  >

    <el-form
        :label-position="'left'"
        label-width="auto"
        :model="courseClass"
        style="max-width: 600px"
    >
      <el-form-item label="分班名称">
        <el-input v-model="courseClass.className"/>
      </el-form-item>
    </el-form>
    <div style="float: right">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleInsertCourseClass" >确认</el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="less">

</style>